&.menu-box {
	box-shadow: 0 0 0 1px rgba(39,41,43,.15),0 1px 2px 0 rgba(0,0,0,.05);
	li {position: relative;}

	label {
		color: #9B9B9B !important; 
		cursor: pointer; 
		margin: 0;
		font-weight: 400;
		background: #fff;
		border-bottom: solid 1px rgba(39,41,43,.15);
		transition(all ease-out 0.2s); 
		padding: pd pd+10; 
		font-size: 15px;

		&:before {
			  content: attr(data-count);
			  position: absolute;
			  padding: 4px 6px 7px;
			  font-size: 14px;
			  line-height: 10px;
			  margin: 3px;
			  right: 10px;
			  top: 2px;
			  color: #fff;
			  background: #ccc;
		 }

		 &:after { 
		 	width: 2px;
			content:"";
			position: absolute;
			height: 100%;
			left: 0;
			top: 0;
		}

		 &.update:before {
		 	background: color-box;
		 }
		 
		 &.info:before {
		 	background: color-info;
		 }

		 &.danger:before {
		 	background: color-cancel;
		 }

		 &._search:before {
		 	background: transparent; 
		 	content:'';
		 }

		 &:hover{
		 	background: color-bg;
		 }
	}

	i {
		float: right; 
		color: #ccc!important; 
	} 

	label:after, i { 
		transition(all ease-out 0.2s);
	}
	li:last-child label{border-bottom: none;}

	input:checked ~ label:after {background: #333;}
	input.info:checked ~ label:after {background: color-info;}
	input.danger:checked ~ label:after {background: color-cancel;}

	input:checked ~ label.update{
		color: color-box;
		&:after {background: color-box;}
	}
	input:checked ~ label {background:color-bg;
		i {color: #333;}
	}
}

&.menu-list { 
	label { 
		padding: 5px 0;
		box-shadow: inset -2px 0px 0 #F4F4F4;
		cursor: pointer;
		margin: 0;
	}

	input:checked ~ label {box-shadow: inset -2px 0px 0 color-box;}
	input.danger:checked ~ label {box-shadow: inset -2px 0px 0 color-cancel;}
	input.on:checked ~ label {box-shadow: inset -2px 0px 0 color-on;}
	input.info:checked ~ label {box-shadow: inset -2px 0px 0 color-info;}
}